<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>tabs组件示例:</title>

<!--一个基于flexbox的布局类库-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">


<style type="text/css">

body {

    padding-top: 40px;

}

</style>

</head>



<body>


<div id="root"  class="container">

<!-- tabs组件 -->


<!--ul#tab>li*4[href=#]-->

<tabs>

<tab name="项目1" :selected="true">
  <h1> 这是项目1的介绍</h1>
</tab>

<tab name="项目2">
  <h1> 这是项目2的介绍</h1>
</tab>

<tab name="项目3">
  <h1> 这是项目3的介绍</h1>
</tab>

<tab name="项目4">
  <h1> 这是项目4的介绍</h1>
</tab>

 </tabs>




</div>



<!-- vue -->
<!-- <script src="https://unpkg.com/vue@2.4.2"></script> -->
<script src="./js/vue2.4.2.js"></script>

<!--
    引入组件
  -->
<script src="./exerciseJS/component_tabs.js" >  </script>

  </body>
</html>
